<!--sidebar-menu-->
<div id="sidebar" class="clearfix"><!-- <a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a> -->
  <ul style="display: block;">
  {% include "common/menu.html" %}
  </ul>
</div>
<!--end sidebar-menu-->

<div id="content">

    <div class="container-fluid" style="padding: 0;">

        <div class="widget-box tab-tabs" >
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    {% include "common/tab.html" %}
                </ul>
            </div>
            <div class="widget-content tab-content" style="overflow: hidden;">

                <div class="row-fluid">
                    <div id="newAdd" class="countBox container-fluid" style="padding: 0;">
                        <div class="row-fluid" style="margin-top: 30px;color: #fff;min-width: 1000px;">
                            <div class="nav-line-tab nav-line nav-tab5" data="5" style="background-color: #fff;">
                                <a class="_nav active"  data="<?php echo date('Y-m-d',strtotime('today')); ?>" >今天</a>
                                <a class="_nav" type="yesterDay"  data="<?php echo date('Y-m-d',strtotime('-1 day')); ?>" >昨天</a>
                                <a class="_nav"  data="<?php echo date('Y-m-d',strtotime('-6 day')); ?>" >最近7天</a>
                                <a class="_nav"  data="<?php echo date('Y-m-d',strtotime('-29 day')); ?>" >最近30天</a>

                                <a  class="date-calendar"><i class=" icon-calendar"></i> <input id="Newdate" value="<?php echo date('Y-m-d',strtotime('today')); ?> - <?php echo date('Y-m-d',strtotime('today')); ?>" data="toDay"  placeholder="请输入日期"></a>
                                <select id="select_id" data="1" class="pull-right" style="width: 70px;margin-right: 30px;">
                                    <option value="1">注数</option>
                                    <option value="3">用户</option>
                                </select>
                                <span class="pull-right" style="color: #000000;padding-top: 5px;font-size: 18px;">显示方式：</span>
                            </div>
                            <div class="clearfix" style="min-width: 1000px;padding-top: 20px;">
                                <div class="pull-left" style="width: 40%;height: 300px;">
                                    <div class="nav-line-tab nav-line"  style="text-align: center;">
                                        <a class="_nav">饼形图</a>
                                    </div>
                                    <div id="containerty"  class="nav-line-tab nav-line"  style="text-align: center;background-color: #fff;position: relative;">
                                        <canvas id="chart" width="670" height="500" style="position: relative;"></canvas>
                                        <table id="chartData" style="position: absolute;left: 540px;top: -40px;">
                                            <tr>
                                                <th>下注方式</th><th id="StatisticsName">积分</th>
                                            </tr>
                                            <tr style="color:#0DA068">
                                                <td>积分</td><td id="pointSum1">0</td>
                                            </tr>
                                            <tr style="color:#194E9C">
                                                <td>聊币</td><td id="cashSum2">0</td>
                                            </tr>
                                            <tr style="color:#ED9C13">
                                                <td>积分、聊币</td><td id="allSum3">0</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="pull-right" style="width: 59%;">
                                    <div class="nav-line-tab nav-line"  style="text-align: center;">
                                        <a class="_nav">折线图</a>
                                    </div>
                                    <div class="nav-line-tab nav-line"  style="text-align: center;background-color: #fff;">
                                        <div id="render-chart5" style="height: 500px;margin-top: 10px;width: 100%;color: #000;">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid" style="margin-bottom: 50px;">
                            <div class="nav-line-tab nav-line"  style="text-align: center;margin: 10px 0;">
                                <a class="_nav">表格-详细数据</a>
                            </div>
                            <table id="tableList" class="table with-check table-purple _tableList-spe">
                                <thead>
                                    <tr>
                                        <td rowspan="2">用户数</td>
                                        <td colspan="2">所有</td>
                                        <td colspan="2">WEB</td>
                                        <td colspan="2">IOS</td>
                                        <td colspan="2">Android</td>
                                    </tr>
                                    <tr>
                                        <td>聊币</td>
                                        <td>积分</td>
                                        <td>聊币</td>
                                        <td>积分</td>
                                        <td>聊币</td>
                                        <td>积分</td>
                                        <td>聊币</td>
                                        <td>积分</td>
                                    </tr>
                                </thead>
                                <tbody>


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>
<script src="{{static_url('web/js/daterangepicker.jQuery.js')}}"></script>
<link rel="stylesheet" href="{{static_url('web/css/ui.daterangepicker.css')}}">
<link rel="stylesheet" href="{{static_url('web/css/icon/style-icon.css')}}">
<link rel="stylesheet" href="{{static_url('web/css/canvas.css')}}">
<script type="text/javascript" src="{{static_url('web/js/flotr2.js')}}"></script>
<script src="{{static_url('web/js/jquery.ui.datepicker-zh-CN.js')}}"></script>
<!--[if IE]>
<script src="{{static_url('web/js/excanvas.js')}}"></script>
<![endif]-->

<script type="text/javascript">

    $(function(){
        $('body').css('overflow-x','auto');
        getRegPlatCount();
        selectchange();
        $('.nav-line-tab ._nav').click(function(){
            var a=$(this).parent().attr('data');
            $('.nav-tab'+a+' ._nav').removeClass('active');
            $(this).addClass('active');
            if(a==5){
                var a=$(this).attr('data');
                var type=$(this).attr('type');
                var myDate = new Date();
                var b=myDate.toLocaleDateString();

                b=b.replace('/', '-').replace('/', '-').replace('/', '');//替换
                b=b.replace('年', '-').replace('月', '-').replace('日', '');//替换
                if(type=='yesterDay'){
                    var c=a+' - '+a;
                }
                else{
                    var c=a+' - '+b;
                }

                $('#Newdate').val(c);
                pieChart();
                getRegPlatCount()

            }

            return false;
        });

        $('#Newdate').daterangepicker({
            presetRanges:[
                //{text:'最近一周', dateStart:'yesterday-7days', dateEnd:'yesterday' },
                //{text:'最近一月', dateStart:'yesterday-1month', dateEnd:'yesterday' },
                //{text:'最近一年', dateStart:'yesterday-1year', dateEnd:'yesterday' }
            ],
            presets:{
                dateRange:'自定义时间'
            },
            rangeStartTitle:'起始日期',
            rangeEndTitle:'结束日期',
            nextLinkText:'下月',
            prevLinkText:'上月',
            doneButtonText:'确定',
            cancelButtonText:'取消',
            earliestDate:'',
            latestDate:Date.parse('today'),
            constrainDates:true,
            rangeSplitter:'-',
            dateFormat:'yy-mm-dd',
            closeOnSelect:false,
            onOpen:function(){
                $('.ui-daterangepicker-dateRange').click().parent().hide();
                $('.ui-daterangepickercontain').css({left:($('#Newdate').offset().left-325)+'px'});
                $('.ui-daterangepickercontain').css({top:($('#Newdate').offset().top+25)+'px'});
            },
            onClose:function(){
                var c=$('#Newdate').attr('data');
                $('.nav-tab5 ._nav').removeClass('active');
                getRegPlatCount();

            }
        })

    });
    function pieChart() {

        // Config settings
        var chartSizePercent = 55;                        // The chart radius relative to the canvas width/height (in percent)
        var sliceBorderWidth = 1;                         // Width (in pixels) of the border around each slice
        var sliceBorderStyle = "#fff";                    // Colour of the border around each slice
        var sliceGradientColour = "#ddd";                 // Colour to use for one end of the chart gradient
        var maxPullOutDistance = 25;                      // How far, in pixels, to pull slices out when clicked
        var pullOutFrameStep = 4;                         // How many pixels to move a slice with each animation frame
        var pullOutFrameInterval = 40;                    // How long (in ms) between each animation frame
        var pullOutLabelPadding = 65;                     // Padding between pulled-out slice and its label
        var pullOutLabelFont = "bold 16px 'Trebuchet MS', Verdana, sans-serif";  // Pull-out slice label font
        var pullOutValueFont = "bold 12px 'Trebuchet MS', Verdana, sans-serif";  // Pull-out slice value font
        var pullOutValuePrefix = "";                     // Pull-out slice value prefix
        var pullOutShadowColour = "rgba( 0, 0, 0, .5 )";  // Colour to use for the pull-out slice shadow
        var pullOutShadowOffsetX = 5;                     // X-offset (in pixels) of the pull-out slice shadow
        var pullOutShadowOffsetY = 5;                     // Y-offset (in pixels) of the pull-out slice shadow
        var pullOutShadowBlur = 5;                        // How much to blur the pull-out slice shadow
        var pullOutBorderWidth = 2;                       // Width (in pixels) of the pull-out slice border
        var pullOutBorderStyle = "#333";                  // Colour of the pull-out slice border
        var chartStartAngle = -.5 * Math.PI;              // Start the chart at 12 o'clock instead of 3 o'clock

        // Declare some variables for the chart
        var canvas;                       // The canvas element in the page
        var currentPullOutSlice = -1;     // The slice currently pulled out (-1 = no slice)
        var currentPullOutDistance = 0;   // How many pixels the pulled-out slice is currently pulled out in the animation
        var animationId = 0;              // Tracks the interval ID for the animation created by setInterval()
        var chartData = [];               // Chart data (labels, values, and angles)
        var chartColours = [];            // Chart colours (pulled from the HTML table)
        var totalValue = 0;               // Total of all the values in the chart
        var canvasWidth;                  // Width of the canvas, in pixels
        var canvasHeight;                 // Height of the canvas, in pixels
        var centreX;                      // X-coordinate of centre of the canvas/chart
        var centreY;                      // Y-coordinate of centre of the canvas/chart
        var chartRadius;                  // Radius of the pie chart, in pixels

        // Set things up and draw the chart
        init();


        /**
         * Set up the chart data and colours, as well as the chart and table click handlers,
         * and draw the initial pie chart
         */

        function init() {

            // Get the canvas element in the page
            canvas = document.getElementById('chart');

            // Exit if the browser isn't canvas-capable
            if ( typeof canvas.getContext === 'undefined' ) return;

            // Initialise some properties of the canvas and chart
            canvasWidth = canvas.width;
            canvasHeight = canvas.height;
            centreX = canvasWidth / 2;
            centreY = canvasHeight / 2;
            chartRadius = Math.min( canvasWidth, canvasHeight ) / 2 * ( chartSizePercent / 100 );

            // Grab the data from the table,
            // and assign click handlers to the table data cells

            var currentRow = -1;
            var currentCell = 0;

            $('#chartData td').each( function() {
                currentCell++;
                if ( currentCell % 2 != 0 ) {
                    currentRow++;
                    chartData[currentRow] = [];
                    chartData[currentRow]['label'] = $(this).text();
                } else {
                    var value = parseFloat($(this).text());
                    totalValue += value;
                    value = value.toFixed(2);
                    chartData[currentRow]['value'] = value;
                }

                // Store the slice index in this cell, and attach a click handler to it
                $(this).data( 'slice', currentRow );
                $(this).click( handleTableClick );

                // Extract and store the cell colour
                if ( rgb = $(this).css('color').match( /rgb\((\d+), (\d+), (\d+)/) ) {
                    chartColours[currentRow] = [ rgb[1], rgb[2], rgb[3] ];
                } else if ( hex = $(this).css('color').match(/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/) ) {
                    chartColours[currentRow] = [ parseInt(hex[1],16) ,parseInt(hex[2],16), parseInt(hex[3], 16) ];
                } else {
                    alert( "Error: Colour could not be determined! Please specify table colours using the format '#xxxxxx'" );
                    return;
                }

            } );

            // Now compute and store the start and end angles of each slice in the chart data

            var currentPos = 0; // The current position of the slice in the pie (from 0 to 1)

            for ( var slice in chartData ) {
                chartData[slice]['startAngle'] = 2 * Math.PI * currentPos;
                chartData[slice]['endAngle'] = 2 * Math.PI * ( currentPos + ( chartData[slice]['value'] / totalValue ) );
                currentPos += chartData[slice]['value'] / totalValue;
            }

            // All ready! Now draw the pie chart, and add the click handler to it
            drawChart();
            $('#chart').click ( handleChartClick );
        }


        /**
         * Process mouse clicks in the chart area.
         *
         * If a slice was clicked, toggle it in or out.
         * If the user clicked outside the pie, push any slices back in.
         *
         * @param Event The click event
         */

        function handleChartClick ( clickEvent ) {

            // Get the mouse cursor position at the time of the click, relative to the canvas
            var mouseX = clickEvent.pageX - this.offsetLeft;
            var mouseY = clickEvent.pageY - this.offsetTop;

            // Was the click inside the pie chart?
            var xFromCentre = mouseX - centreX;
            var yFromCentre = mouseY - centreY;
            var distanceFromCentre = Math.sqrt( Math.pow( Math.abs( xFromCentre ), 2 ) + Math.pow( Math.abs( yFromCentre ), 2 ) );

            if ( distanceFromCentre <= chartRadius ) {

                // Yes, the click was inside the chart.
                // Find the slice that was clicked by comparing angles relative to the chart centre.

                var clickAngle = Math.atan2( yFromCentre, xFromCentre ) - chartStartAngle;
                if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;

                for ( var slice in chartData ) {
                    if ( clickAngle >= chartData[slice]['startAngle'] && clickAngle <= chartData[slice]['endAngle'] ) {

                        // Slice found. Pull it out or push it in, as required.
                        toggleSlice ( slice );
                        return;
                    }
                }
            }

            // User must have clicked outside the pie. Push any pulled-out slice back in.
            pushIn();
        }


        /**
         * Process mouse clicks in the table area.
         *
         * Retrieve the slice number from the jQuery data stored in the
         * clicked table cell, then toggle the slice
         *
         * @param Event The click event
         */

        function handleTableClick ( clickEvent ) {
            var slice = $(this).data('slice');
            toggleSlice ( slice );
        }


        /**
         * Push a slice in or out.
         *
         * If it's already pulled out, push it in. Otherwise, pull it out.
         *
         * @param Number The slice index (between 0 and the number of slices - 1)
         */

        function toggleSlice ( slice ) {
            if ( slice == currentPullOutSlice ) {
                pushIn();
            } else {
                startPullOut ( slice );
            }
        }


        /**
         * Start pulling a slice out from the pie.
         *
         * @param Number The slice index (between 0 and the number of slices - 1)
         */

        function startPullOut ( slice ) {

            // Exit if we're already pulling out this slice
            if ( currentPullOutSlice == slice ) return;

            // Record the slice that we're pulling out, clear any previous animation, then start the animation
            currentPullOutSlice = slice;
            currentPullOutDistance = 0;
            clearInterval( animationId );
            animationId = setInterval( function() { animatePullOut( slice ); }, pullOutFrameInterval );

            // Highlight the corresponding row in the key table
            $('#chartData td').removeClass('highlight');
            var labelCell = $('#chartData td:eq(' + (slice*2) + ')');
            var valueCell = $('#chartData td:eq(' + (slice*2+1) + ')');
            labelCell.addClass('highlight');
            valueCell.addClass('highlight');
        }


        /**
         * Draw a frame of the pull-out animation.
         *
         * @param Number The index of the slice being pulled out
         */

        function animatePullOut ( slice ) {

            // Pull the slice out some more
            currentPullOutDistance += pullOutFrameStep;

            // If we've pulled it right out, stop animating
            if ( currentPullOutDistance >= maxPullOutDistance ) {
                clearInterval( animationId );
                return;
            }

            // Draw the frame
            drawChart();
        }


        /**
         * Push any pulled-out slice back in.
         *
         * Resets the animation variables and redraws the chart.
         * Also un-highlights all rows in the table.
         */

        function pushIn() {
            currentPullOutSlice = -1;
            currentPullOutDistance = 0;
            clearInterval( animationId );
            drawChart();
            $('#chartData td').removeClass('highlight');
        }


        /**
         * Draw the chart.
         *
         * Loop through each slice of the pie, and draw it.
         */

        function drawChart() {

            // Get a drawing context
            var context = canvas.getContext('2d');

            // Clear the canvas, ready for the new frame
            context.clearRect ( 0, 0, canvasWidth, canvasHeight );

            // Draw each slice of the chart, skipping the pull-out slice (if any)
            for ( var slice in chartData ) {
                if ( slice != currentPullOutSlice ) drawSlice( context, slice );
            }

            // If there's a pull-out slice in effect, draw it.
            // (We draw the pull-out slice last so its drop shadow doesn't get painted over.)
            if ( currentPullOutSlice != -1 ) drawSlice( context, currentPullOutSlice );
        }


        /**
         * Draw an individual slice in the chart.
         *
         * @param Context A canvas context to draw on
         * @param Number The index of the slice to draw
         */

        function drawSlice ( context, slice ) {

            // Compute the adjusted start and end angles for the slice
            var startAngle = chartData[slice]['startAngle']  + chartStartAngle;
            var endAngle = chartData[slice]['endAngle']  + chartStartAngle;

            //if ( slice == currentPullOutSlice ) {

            // We're pulling (or have pulled) this slice out.
            // Offset it from the pie centre, draw the text label,
            // and add a drop shadow.

            var midAngle = (startAngle + endAngle) / 2;
            var actualPullOutDistance = currentPullOutDistance * easeOut( currentPullOutDistance/maxPullOutDistance, .8 );
            startX = centreX + Math.cos(midAngle) * actualPullOutDistance;
            startY = centreY + Math.sin(midAngle) * actualPullOutDistance;
            context.fillStyle = 'rgb(' + chartColours[slice].join(',') + ')';
            context.textAlign = "center";
            context.font = pullOutLabelFont;
            context.fillText( chartData[slice]['label'], centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) );
            context.font = pullOutValueFont;
            context.fillText(chartData[slice]['value'] + " (" + ( parseFloat( chartData[slice]['value'] / totalValue * 100).toFixed(1) ) +  "%)"+pullOutValuePrefix , centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) + 20 );
            context.shadowOffsetX = pullOutShadowOffsetX;
            context.shadowOffsetY = pullOutShadowOffsetY;
            context.shadowBlur = pullOutShadowBlur;

            //} else {

            // This slice isn't pulled out, so draw it from the pie centre
            startX = centreX;
            startY = centreY;
            //}

            // Set up the gradient fill for the slice
            var sliceGradient = context.createLinearGradient( 0, 0, canvasWidth*.75, canvasHeight*.75 );
            sliceGradient.addColorStop( 0, sliceGradientColour );
            sliceGradient.addColorStop( 1, 'rgb(' + chartColours[slice].join(',') + ')' );

            // Draw the slice
            context.beginPath();
            context.moveTo( startX, startY );
            context.arc( startX, startY, chartRadius, startAngle, endAngle, false );
            context.lineTo( startX, startY );
            context.closePath();
            context.fillStyle = sliceGradient;
            context.shadowColor = ( slice == currentPullOutSlice ) ? pullOutShadowColour : "rgba( 0, 0, 0, 0 )";
            context.fill();
            context.shadowColor = "rgba( 0, 0, 0, 0 )";

            // Style the slice border appropriately
            if ( slice == currentPullOutSlice ) {
                context.lineWidth = pullOutBorderWidth;
                context.strokeStyle = pullOutBorderStyle;
            } else {
                context.lineWidth = sliceBorderWidth;
                context.strokeStyle = sliceBorderStyle;
            }

            // Draw the slice border
            context.stroke();
        }


        /**
         * Easing function.
         *
         * A bit hacky but it seems to work! (Note to self: Re-read my school maths books sometime)
         *
         * @param Number The ratio of the current distance travelled to the maximum distance
         * @param Number The power (higher numbers = more gradual easing)
         * @return Number The new ratio
         */

        function easeOut( ratio, power ) {
            return ( Math.pow ( 1 - ratio, power ) + 1 );
        }

    };

    function getRegPlatCount(){

        var b=$('#Newdate').val();
        var timeBegin= b.substring(0,10);
        var timeEnd= b.substring(12,23);
        if(timeEnd==''){
            timeEnd=timeBegin;
        }

        if(datetime_to_unix(timeEnd)-datetime_to_unix(timeBegin)>=86400){
            var title='天';
        }
        else{
            var title='小时';
        }
        var data={};
        data.startDate=timeBegin;
        data.endDate=timeEnd;
        data.type=$('#select_id').attr('data');

        $.ajax({
            type: "POST",
            data: data,
            url: '/ajax/getBettingStat',
            dataType: 'json',
            success: function (res) {
                var data = res.data.lineData;
                var data1 = res.data.tableData;
                var data2 = res.data.cakeData;
                var a=$('#select_id').attr('data');

                $('#tableList tbody').html('');
                for( var i in data1){

                    $('#tableList tbody').append(rowHtml(data1[i]));

                }


                if(a==1){
                    var yTitle='注数';
                    $('#StatisticsName').html('注数');
                }
                if(a==3){
                    var yTitle='用户';
                    $('#StatisticsName').html('用户');
                }
                var all=parseInt(data2.points)+parseInt(data2.cash)-parseInt(data2.ttl);
                var points=data2.points-all;
                var cash=data2.cash-all;
                $('#pointSum1').html(points);
                $('#cashSum2').html(cash);
                $('#allSum3').html(all);
                var
                        bj =data['points'] ,// First data series
                        sz =data['cash']  //Second data series
//                        sa =data['all']  //third data series

                var data=[
                    {data:bj,label:'积分'},
                    {data:sz,label:'聊币'}
//                    {data:sa,label:'所有'}
                ]

                justDraw(data, {yTitle:yTitle,xTitle:title,container:'render-chart5'});
                pieChart();
            }
        })

    }

    function rowHtml(data){

        var html='';

        html+='<tr>';
        html+='<td rowspan="2" style="width: 300px;">'+data.name+'</td>';
        html+='<td colspan="2">'+data.all.ttl+'</td>';
        html+='<td colspan="2">'+data.pc.ttl+'</td>';
        html+='<td colspan="2">'+data.ios.ttl+'</td>';
        html+='<td colspan="2">'+data.android.ttl+'</td>';
        html+='</tr>';
        html+='<tr>';
        html+='<td>'+data.all.cash+'</td>';
        html+='<td>'+data.all.points+'</td>';
        html+='<td>'+data.pc.cash+'</td>';
        html+='<td>'+data.pc.points+'</td>';
        html+='<td>'+data.ios.cash+'</td>';
        html+='<td>'+data.ios.points+'</td>';
        html+='<td>'+data.android.cash+'</td>';
        html+='<td>'+data.android.points+'</td>';
        html+='</tr>';


        return html;
    }

    function selectchange(){
        $('#select_id').change(function(){
            var checkValue=$("#select_id").val();
            $("#select_id").attr('data',checkValue);
            getRegPlatCount();
        })
    }

</script>
